import React, { Component } from 'react';
//导入CSS样式
import "./tabBar.css"; 
//导入辅助函数
import {mapState, mapDispatch} from "../../store/mapFunction";

class tabBar extends Component {
    tabClickAction(index){
        //完成选中按钮的高亮状态显示
        this.props.selectIndexAction(index+1);
        //执行页面跳转
        this.props.history.replace(this.props.lists[index].path); 
    }
    render() {
        return (
            <div className="tabBar">
                {this.props.lists.map((item, index)=>{
                    return (<div className={this.props.selectIndex === index ? "item select":"item"} key={index} onClick={this.tabClickAction.bind(this, index)}>
                        <div className="icon">
                            <i className={'iconfont '+item.iconName}></i>
                        </div>
                        <div className="item_title">{item.title}</div>
                    </div>)
                })}
            </div>
        );
    }
}

export default mapDispatch(mapState(tabBar, ['selectIndex']), ['selectIndexAction']);